<template>
    <div class="button-box">
        <el-button type="primary" round @click="lookStatusOrder(0)">查看未支付订单</el-button>
        <el-button type="success" round @click="lookStatusOrder(1)">查看未发货订单</el-button>
        <el-button type="info" round @click="lookStatusOrder(2)">查看未收货订单</el-button>
        <el-button type="warning" round @click="lookStatusOrder(3)">查看未评价订单</el-button>
        <el-button type="danger" round @click="lookStatusOrder(4)">查看已完成订单</el-button>
    </div>
    <el-table :data="statusOrderData" style="width: 100%" empty-text="暂无数据">
        <el-table-column prop="name" label="用户姓名" width="50" />
        <el-table-column prop="tel" label="电话" width="50" />
        <el-table-column prop="city" label="市" width="50" />
        <el-table-column prop="county" label="县/区" width="50" />
        <el-table-column prop="addressDetail" label="详细地址" width="50" />
        <el-table-column prop="orderid" label="订单ID" />
        <el-table-column prop="userid" label="用户ID" />
        <el-table-column prop="proname" label="商品名称" />
        <el-table-column prop="proid" label="商品ID" />
        <el-table-column prop="originprice" label="原价" width="50" />
        <el-table-column prop="discount" label="折扣" width="50" />
        <el-table-column prop="num" label="数量" width="50" />
        <el-table-column label="图片">
            <template #default="scope">
                <img class="img" :src="scope.row.img1" alt="商品图片">
            </template>
        </el-table-column>
        <el-table-column prop="time" label="购买时间" />
    </el-table>
</template>

<script setup lang="ts">
import type { AxiosResponse } from 'axios';
import { ElMessage } from 'element-plus';
import { reactive } from 'vue';
import service from '../../../utils/service';


interface IStatusOrder {
    "name": string,
    "tel": string,
    "province": string,
    "city": string,
    "county": string,
    "addressDetail": string,
    "orderid": string,
    "userid": string,
    "status": number,
    "proname": string,
    "proid": string,
    "originprice": number,
    "img1": string,
    "discount": number,
    "num": number,
    "time": string
}
const statusOrderData = reactive<IStatusOrder[]>([])


const lookStatusOrder = (status: number) => {
    service({
        url: `/order/statusList`,
        params: {
            status
        }
    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            statusOrderData.length = 0
            statusOrderData.push(...res.data.data)
            console.log(statusOrderData);

            ElMessage({
                showClose: true,
                message: "查询成功",
                type: "success"
            })
        }
    })
}
</script>

<style scoped>
.img {
    width: 100%;
    height: 100%;
}
</style>